<template>
    <div class="component-top-popup-screen" v-if="value">
        <van-popup :value="true" position="top">
            <div class="head-view">
                <div class="left" @click="handleClose">
                    <img src="../assets/Chevron-left.svg">
                    <span>取消</span>
                </div>
                <div class="center">筛选</div>
                <div class="right">
                    <img src="../assets/icon-search.png">
                    <span>搜索</span>
                </div>
            </div>
            <div class="select-box"><slot name="default"/></div>
            <slot name="foot-view"/>
            <div class="bottom-btn-view">
                <div class="btn reset" @click="$emit('onreset')">重置</div>
                <div class="btn ok" @click="handleOk">确定</div>
            </div>
        </van-popup>
    </div>
</template>

<style lang="less" scoped>

    @import '../style/variable';

    .component-top-popup-screen{

        .head-view{
            position: relative;
            height: 4.5rem;
            border-bottom: 1px solid @color-line-gray;
            .left, .right{
                position: absolute;
                top: 0;
                height: 100%;
                display: flex;
                align-items: center;
                font-size: 1.4rem;
                img{
                    height: 1.5rem;
                    margin-right: .6rem;
                }
            }
            .left{
                left: 1.5rem;
            }
            .right{
                right: 1.5rem;
            }
            .center{
                text-align: center;
                line-height: 4.5rem;
                font-size: 1.5rem;
            }
        }
        .select-box{
            max-height: 40rem;
            overflow-y: auto;
        }

        .bottom-btn-view{
            font-size: 1.6rem;
            line-height: 4.5rem;
            border-top: 1px solid @color-line-gray;
            display: flex;
            .btn{
                flex: 1;
                text-align: center;
            }
            .reset{
                background-color: @color-bg-light-gray;
            }
            .ok{
                background-color: @app-color;
                color: @color-white;
            }
        }

    }
</style>

<script>
    export default {
        data(){
            return {

            }
        },
        props: ['value'],
        methods: {
            handleClose(){
                this.$emit('input', false);
            },
            handleOk(){
                this.$emit('onok');
                this.handleClose();
            }
        }
    }
</script>